<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Options Page</title>
</head>

<body>
	<style type="text/css">
		body {
			font-family: sans-serif;
			font-size: 16px;
			background: #f9f9fa;
		}

		p {
			margin: 3px;
		}

		table {
			width: 100%;
			padding-right: 20px;
		}

		.note {
			font-size: 80%;
			color: rgb(127, 127, 127);
		}

		.highlight {
			font-size: 80%;
			border: solid 2px #D22222;
		}

		#save {
			position: relative;
			width: 80px;
			height: 30px;
			margin-top: 30px;
			font-size: 18px;
			text-align: center;
			background-image: none;
			background-color: rgb(44, 173, 255);
			border-style: none;
			border-radius: 2px;
			text-shadow: rgb(0, 64, 91) 0px 0px 0.5px;
			color: rgb(255, 255, 255);
		}

		.slider {
			width: 85%;
			opacity: 1;

		}
	</style>
	<table>
		<tr>
			<td><Label data-message="OP_zoom">Zoom Level:</Label>
				<input id="zoom" style="width: 300px; margin-top: 5px;" type="text">
			</td>
		</tr>
		<tr>
			<td data-message="OPN_zoom" class="note">Zoom Level of Download Panel. Default value is 1.</td>
		</tr>
		<tr>
			<td>
				<input id="cm" style="margin-left: 0px; margin-top: 15px;" type="checkbox">
				<label data-message="OP_contextMenu" for="cm">Add Context Menus</label>
			</td>
		</tr>
		<tr>
			<td data-message="OPN_contextMenu" class="note">Add Context Menus to links, videos and audios </td>
		</tr>
		<tr>
			<td>
				<input id="ua" style="margin-left: 0px; margin-top: 15px;" type="checkbox">
				<label data-message="OP_ua" for="ua">Send User-Agent To Aria2</label>
			</td>
		</tr>
		<tr>
			<td data-message="OPN_ua" class="note">User-Agent will be same as the browser send</td>
		</tr>
		<tr>
			<td>
				<input id="shut" style="margin-left: 0px; margin-top: 15px;" type="checkbox">
				<label data-message="OP_shutdown" for="shut">Shutdown Aria2c when the browser closed</label>
			</td>
		</tr>
		<tr>
			<td data-message="OPN_shutdown" class="note">Send "--stop-with-process=
				<PID>" command to aria2c</td>
		</tr>
		<tr>
			<td>
				<input id="aggre" style="margin-left: 0px; margin-top: 15px;" type="checkbox">
				<label data-message="OP_aggressive" for="aggre">Aggressive Mode</label>
			</td>
		</tr>
		<tr>
			<td data-message="OPN_aggressive" class="note">Detect download links aggressively. May cause some problems.</td>
		</tr>
		<tr>
			<td>
				<input id="winLoc" style="margin-left: 0px; margin-top: 15px;" type="checkbox">
				<label data-message="OP_winLoc" for="winLoc">Remember window location</label>
			</td>
		</tr>
		<tr>
			<td data-message="OPN_winLoc" class="note">The location of Download Panel will be saved (but firefox has bug to create window)</td>
		</tr>
		<tr>
			<td>
				<input id="auto" style="margin-left: 0px; margin-top: 15px;" type="checkbox">
				<label data-message="OP_auto" for="auto">Aria2 Auto Start</label>
			</td>
		</tr>
		<tr>
			<td data-message="OPN_auto" class="note">Start Aria2 automatically when the download start</td>
		</tr>
		<tr>
			<td>
				<input id="autoSet" style="margin-left: 0px; margin-top: 15px;" type="checkbox">
				<label data-message="OP_autoSet" for="autoSet">AriaNg Auto Set</label>
			</td>
		</tr>
		<tr>
			<td data-message="OPN_autoSet" class="note">Set AriaNg automatically when the user click "details"</td>
		</tr>
		<tr>
			<td>
				<input id="chgLog" style="margin-left: 0px; margin-top: 15px;" type="checkbox">
				<label data-message="OP_chgLog" for="chgLog">Display Changelog</label>
			</td>
		</tr>
		<tr>
			<td data-message="OPN_chgLog" class="note">Display Changelog After Update</td>
		</tr>
		<tr>
			<td>
				<input id="badge" style="margin-left: 0px; margin-top: 15px;" type="checkbox">
				<label data-message="OP_badge" for="badge">Display Current Active Download Count</label>
			</td>
		</tr>
		<tr>
			<td data-message="OPN_badge" class="note">Display current active download count on top of the icon</td>
		</tr>
		<tr>
			<td>
				<input id="downPanel" style="margin-left: 0px; margin-top: 15px;" type="checkbox">
				<label data-message="OP_downPanel" for="downPanel">Display Download Panel</label>
			</td>
		</tr>
		<tr>
			<td data-message="OPN_downPanel" class="note">Whether to display a download panel for the download event trigger from the auto observer</td>
		</tr>
		<tr>
			<td>
				<input id="cmDownPanel" style="margin-left: 0px; margin-top: 15px;" type="checkbox">
				<label data-message="OP_cmDownPanel" for="cmDownPanel">Display Download Panel (context menu)</label>
			</td>
		</tr>
		<tr>
			<td data-message="OPN_cmDownPanel" class="note">Whether to display a download panel for the download event trigger from the context menu</td>
		</tr>
		<tr><td><br></td></tr>
		<tr>
			<td>
				<label data-message="OP_winWidth" for="winLoc">Download Panel width offset</label>
				<input style="width: 500px;" type="range" min="-5000" max="5000" value="0" class="slider" id="dpWidth">
				<input id="dpWidthN" style="width: 5em;" value="0" min="-5000" max="5000" type="number" required>
			</td>
		</tr>
		<tr>
			<td data-message="OPN_winWidth" class="note">Fine Tune Download Window width</td>
		</tr>
		<tr><td><br></td></tr>
		<tr>
			<td>
				<label data-message="OP_winHeight" for="winLoc">Download Panel height offset</label>
				<input style="width: 500px;" type="range" min="-5000" max="5000" value="0" class="slider" id="dpHeight">
				<input id="dpHeightN" style="width: 5em;" value="0" min="-5000" max="5000" type="number" required>
			</td>
		</tr>
		<tr>
			<td data-message="OPN_winHeight" class="note">Fine Tune Download Window height</td>
		</tr>
	</table>
	<div align="right">
		<span id="status"></span>
		<button data-message="OP_save" id="save">Save</button>
	</div>
	<script src="/config.js"></script>
	<script src="general.js"></script>
</body>

</html>